<template>
	<view class="detail-container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" 
		indicator-active-color="#fb6600" 	indicator-color="#fff" 	circular=true>
			<swiper-item v-for="(item,index) in swiperImg" :key="index">
				<image :src="item" mode="widthFix" class="swiperImg"></image>
			</swiper-item>
		</swiper>
		<view class="price">
			<text class="newPrice">￥{{newPrice}}</text>
			<text class="oldPrice">￥{{oldPrice}}</text>
		</view>
		<view class="title">
			{{title}}
		</view>
		<view class="detail">
			{{detail}}
		</view>
		<block v-for="(item,index) in detailsImages" :key="index">
			<image :src="item" mode="widthFix" class="detailsImages"></image>
		</block>
		<view class="footer">
			<view class="left">
				<navigator url="/pages/index/index" open-type='switchTab'>
					<image src="/static/image/index.png" mode="heightFix"></image>
					<text>首页</text>
				</navigator>
				<navigator url="/pages/cart/cart" open-type='switchTab'>
					<image src="/static/image/gouwuche.png" mode="heightFix"></image>
					<text>购物车</text>
				</navigator>
				<navigator url="">
					<image src="/static/image/favorite.png" mode="heightFix"></image>
					<text>收藏</text>
				</navigator>
			</view>
			<view class="right">
				<navigator url="" class="addCart">加入购物车</navigator>
				<navigator url="" class="buyNow">立即购买</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"小米10",
				newPrice:3699,
				oldPrice:3999,
				detail:"骁龙865/一亿像素",
				swiperImg:[
					"/static/image/detailsImg/details-1.1.jpg",
					"/static/image/detailsImg/details-1.2.jpg",
					"/static/image/detailsImg/details-1.3.jpg",
					"/static/image/detailsImg/details-1.4.jpg",
					"/static/image/detailsImg/details-1.5.jpg"
				],
				detailsImages:[
					"/static/image/detailsImg/describe-1.1.jpg",
					"/static/image/detailsImg/describe-1.2.jpg",
					"/static/image/detailsImg/describe-1.3.jpg",
					"/static/image/detailsImg/describe-1.4.jpg",
				]
			}
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
.detail-container{
	padding-bottom: 110rpx;
	.swiperImg{
		width: 100%;
	}
	swiper-item{
		width: 100%;
	}
	swiper{
		height: calc(100vw * 1188 / 1080);
	}
	.price{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.newPrice{
		  font-size: 70rpx;
		  color: red;
		  margin-right: 10rpx;
		}
		.oldPrice{
		  font-size: 40rpx;
		  color: grey;
		  text-decoration: line-through;
		}
	}
	.title{
		font-size: 50rpx;
		margin-bottom: 20rpx;
	}
	.detail{
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.detailsImages{
		width: 100%;
		display: block;
	}
	.footer{
		position: fixed;
		display: flex;
		bottom: 0;
		height: 110rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid black;
		.left{
			display: flex;
			width: 50%;
			navigator{
				display: flex;
				flex-direction: column;
				flex: 3;
				justify-content: center;
				align-items: center;
				image{
					height: 50%;
				}
			}
		}
		.right{
			height: 100%;
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			.addCart{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 50%;
				background-color: #fdae01;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				color: #fff;
			}
			.buyNow{
				display: flex; 
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 50%;
				background-color: #fd651f;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
				color: #fff;
			}
		}
	}
}
</style>
